<template>
	<div class="abs-center">
		<div class="auth-dialog">
			<div class="dialog-header">
				<div class="title">私有化授权</div>
				<div class="content">
					<div>尊敬的用户，您好：</div>
					<div>
						请输入相应的Key及License进行授权，本次授权将同步设计态及运行态，在有效期内，仅需要授权一次
					</div>
				</div>
				<div class="bg"><img src="images/userbk.png" class="bgimg" /></div>
			</div>
			<div class="dialog-content">
				<div class="input-line">
					<div class="input-title"><span class="require">*</span> Key</div>
					<div class="input-content">
						<textarea
							type="text"
							class="input-class"
							rows="10"
							v-model="key"
						></textarea>
					</div>
				</div>
				<div class="input-line">
					<div class="input-title"><span class="require">*</span> License</div>
					<div class="input-content">
						<textarea
							type="password"
							class="input-class"
							rows="14"
							v-model="license"
						></textarea>
					</div>
				</div>
				<div class="btn-line">
					<button class="btn-default" @click="reset">重置</button>
					<button class="btn-primary" @click="confirm">确认授权</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { getFetch, getBrowserType } from '@byteluck-fe/global-shared'
import { defineComponent } from 'vue'
import { Modal } from 'ant-design-vue'
export default defineComponent({
	data() {
		return {
			key: '',
			license: '',
		}
	},
	methods: {
		confirm() {
			const baseInfo = process.env.VUE_APP_BASE_INFO_PATH ?? ''
			const http = getFetch(baseInfo)
			http
				.post('/v1/open/tenant/importLicense', {
					auth: String(this.license).replace(/\n/g, ''),
					private_key: this.key.replace(/\n/g, ''),
				})
				.then(res => {
					if (res.code === '000000') {
						Modal.success({
							title: '授权成功',
							content:
								'恭喜您！授权成功，本次授权已同步设计态和运行态，若有疑问，请您联系相关管理员！',
						})
					} else {
						Modal.error({
							title: '授权失败',
							content:
								'十分抱歉，您输入的Key或者License不正确，未能授权成功，请您重新输入或者咨询相关管理员！',
						})
					}
				})
				.catch(() => {
					Modal.error({
						title: '授权失败',
						content: '导入异常',
					})
				})
		},
		reset() {
			this.license = ''
			this.key = ''
		},
	},
})
</script>

<style lang="less">
.abs-center {
	width: 100%;
	height: 100vh;
}
.auth-dialog {
	width: 100%;
	max-width: 1440px;
	height: 854px;
	overflow: hidden;
	background: #ffffff;
	border-radius: 8px;
	margin: 0 auto;
	position: relative;
	top: calc(50% - 400px);
	box-shadow: rgba(136, 156, 208, 0.4) 10px 10px 10px;
}
.dialog-header {
	width: 100%;
	height: 140px;
	/* 品牌色/正常 */
	background: linear-gradient(
			90deg,
			rgba(199, 79, 255, 0.4) 28.85%,
			rgba(255, 255, 255, 0) 100%
		),
		#4c78fc;

	.title {
		padding: 30px;
		color: white;
		font-weight: 600;
		font-size: 20px;
		line-height: 18px;
		text-align: center;
	}
	.content {
		font-size: 14px;
		line-height: 180%;
		color: white;
		opacity: 0.8;
		padding: 0px 50px 18px 50px;
	}
	.bg {
		position: absolute;
		top: 37px;
		right: 0;
	}
	.bgimg {
		width: 168px;
		height: 168px;
	}
}
.dialog-content {
	padding: 20px;
	.input-line {
		padding: 10px;
		font-size: 14px;
		line-height: 20px;
		.input-title {
			flex: 1;
			padding-right: 16px;
			padding-bottom: 8px;
		}
		.require {
			color: #ff6459;
		}
		.input-content {
			flex: 3;
		}
		.input-class {
			border: 1px solid #dee0e3;
			width: 100%;
			border-radius: 4px;
			padding: 8px 12px;
		}
	}
}
.btn-line {
	text-align: center;
}
.btn-default {
	width: 71px;
	height: 32px;
	background: #ffffff;
	border: 1px solid #dee0e3;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 10px;
}
.btn-primary {
	width: 86px;
	height: 32px;
	color: white;
	/* 品牌色/main */
	background: #4c78fc;
	border-radius: 4px;
	margin: 10px;
}
</style>
